<template>
  <div class="container">
    <div class="career-page">
      <ul class="nav">
        <li class="item" :class="{ 'on': navIndex == 1 }" @click="navIndex = 1">相册管理</li>
        <li class="item" :class="{ 'on': navIndex == 2 }" @click="navIndex = 2">视频管理</li>
        <li class="item" :class="{ 'on': navIndex == 3 }" @click="navIndex = 3">视频URL管理</li>
      </ul>
      <div class="body">
        <div class="wrapper photo" :class="{ 'on': navIndex == 1 }">
          <ul class="list">
            <li class="item add" @click="uploadImage">
              <img src="/static/images/icon/add.png" alt="" class="image">
            </li>
            <li class="item" v-for="(item, index) in images" :key="index" @click="photoIndex = index">
              <img :src="item.path" mode="widthFix" class="image">
              <div class="hendle" v-if="photoIndex == index">
                <div class="box" @click.stop="seeImage(index)">
                  <img class="icon" src="/static/images/icon/see.png" alt="">
                  <div class="text">查看</div>
                </div>
                <div class="box" @click.stop="delImage(index)">
                  <img class="icon" src="/static/images/icon/delete.png" alt="">
                  <div class="text">删除</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="wrapper video" :class="{ 'on': navIndex == 2 }">
          <ul class="list">
            <li class="item add" @click="uploadVideo">
              <img src="/static/images/icon/add.png" alt="" class="image">
            </li>
            <li class="item" v-for="(item, index) in videos" :key="index">
              <video :src="item.path" alt="" class="video-box">
                <cover-view class="hendle">
                  <cover-view class="box" @click.stop="delVideo(index)">
                    <cover-image class="icon" src="/static/images/icon/delete.png" alt=""/>
                  </cover-view>
                </cover-view>
              </video>
            </li>
          </ul>
        </div>
        <div class="wrapper video" :class="{ 'on': navIndex == 3 }">
          <ul class="list">
            <li class="item add" @click="isShow = true">
              <img src="/static/images/icon/add.png" alt="" class="image">
            </li>
            <li class="item" v-for="(item, index) in videoUrlList" :key="index">
              <video :src="item.link" alt="" class="video-box">
                <cover-view class="hendle">
                  <cover-view class="box" @click.stop="delVideoUrl(item.id)">
                    <cover-image class="icon" src="/static/images/icon/delete.png" alt=""/>
                  </cover-view>
                </cover-view>
              </video>
            </li>
          </ul>
        </div>
      </div>
      <div class="url-modal" v-if="isShow">
        <div class="modal-mask"></div>
        <div class="modal-box">
          <div class="title">添加视频链接</div>
          <div class="content">
            <textarea maxlength="-1" v-model="videoUrl" class="textarea" placeholder="请输入可在线播放的视频资源链接"></textarea>
          </div>
          <div class="buttons">
            <div class="btn" @click="isShow = false">取消</div>
            <div class="btn" @click="getClipboard">粘贴入</div>
            <div class="btn" @click="uploadVideoUrl">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import conf from '@/utils/conf'

export default {
  data () {
    return {
      /*
       * navIndex             导航下标
       * photoIndex           图片下标
       * images               图片列表
       * videos               视频列表
       */
      navIndex: 1,
      photoIndex: 0,
      isShow: false,
      videoUrl: '',
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    },
    images () {
      return this.$store.state.photoList;
    },
    videos () {
      return this.$store.state.videoList;
    },
    videoUrlList () {
      return this.$store.state.videoUrlList;
    },
  },

  methods: {
    /*
     * 放大看图片
     */
    seeImage (index) {
      let self = this;
      let images = [];
      this.images.map((image) => {
        images.push(image.path);
      });
      wx.previewImage({
        current: images[index],
        urls: images
      });
    },
    /*
     * 删除图片
     */
    delImage (index) {
      let self = this;
      this.$modal.show({
        content: '是否确定删除图片？',
        success (res) {
          if (res.confirm) {
            self.$toast.show('删除中...');
            self.$axios.delFile({
              id: self.images[index].id
            })
            .then((res) => {
              self.$toast.hide();
              if (0 === res.data.code * 1) {
                let len = self.images.length - 2;
                if (self.photoIndex > len) {
                  self.photoIndex = len;
                }
                self.getImage();
              }
              else {
                wx.showToast({
                  title: '删除失败',
                  icon: 'none',
                  duration: 1500,
                });
              }
            });
          }
        },
      });
    },
    /*
     * 上传图片
     */
    uploadImage () {
      let self = this;
      wx.chooseImage({
        count: 1,
        success (res) {
          let file = res.tempFilePaths[0];
          self.$toast.show();
          self.$upload({
            file: file,
            id: '1',
            name: 'photo'
          }).then((res) => {
            self.$toast.hide();
            let data = JSON.parse(res.data);
            if (0 === data.code * 1) {
              self.getImage();
            }
            else {
              wx.showToast({
                title: '上传失败',
                icon: 'none',
                duration: 1500,
              });
            }
          });
        }
      });
    },
    /*
     * 获取图片
     */
    getImage () {
      let self = this;
      this.$toast.show();
      this.$axios.getFile({
        openId: self.userInfo.openId,
        module_id: '1',
        module: 'photo',
      })
      .then((res) => {
        self.$toast.hide();
        if (0 === res.data.code * 1) {
          res.data.data.map((item) => {
            item.path = `${conf.api}${item.path}`;
          });
          self.$store.dispatch('getPhotoList', res.data.data);
        }
      });
    },
    /*
     * 上传视频
     */
    uploadVideo () {
      let self = this;
      wx.chooseVideo({
        sourceType: ['album','camera'],
        maxDuration: 60,
        camera: 'back',
        success (res) {
          let file = res.tempFilePath;
          self.$toast.show();
          self.$upload({
            file: file,
            id: '2',
            name: 'video'
          }).then((res) => {
            self.$toast.hide();
            let data = JSON.parse(res.data);
            if (0 === data.code * 1) {
              self.getVideo();
            }
            else{
              wx.showToast({
                title: '上传失败',
                icon: 'none',
                duration: 1500,
              });
            }
          });
        }
      });
    },
    /*
     * 获取视频
     */
    getVideo () {
      let self = this;
      this.$toast.show();
      this.$axios.getFile({
        openId: self.userInfo.openId,
        module_id: '2',
        module: 'video',
      })
      .then((res) => {
        self.$toast.hide();
        if (0 === res.data.code * 1) {
          res.data.data.map((item) => {
            item.path = `${conf.api}${item.path}`;
          });
          self.$store.dispatch('getVideoList', res.data.data);
        }
      });
    },
    /*
     * 删除视频
     */
    delVideo (index) {
      let self = this;
      this.$modal.show({
        content: '是否确定删除视频？',
        success (res) {
          if (res.confirm) {
            self.$toast.show('删除中...');
            self.$axios.delFile({
              id: self.videos[index].id
            })
            .then((res) => {
              self.$toast.hide();
              if (0 === res.data.code * 1) {
                self.getVideo();
              }
              else{
                wx.showToast({
                  title: '删除失败',
                  icon: 'none',
                  duration: 1500,
                });
              }
            });
          }
        },
      });
    },
    /*
     * 上传视频URL
     */
    uploadVideoUrl () {
      let self = this;
      if (!this.videoUrl) {
        this.$modal.show('内容不能为空');
        return;
      }
      this.$toast.show();
      this.$axios.setLink({
        link: self.videoUrl
      }).then((res) => {
        self.$toast.hide();
        if (0 === res.data.code * 1) {
          self.videoUrl = '';
          self.isShow = false;
          self.getVideoUrl();
        } else{
          wx.showToast({
            title: '上传失败',
            icon: 'none',
            duration: 1500,
          });
        }
      })
    },
    /*
     * 获取视频URL
     */
    getVideoUrl () {
      let self = this;
      this.$toast.show();
      this.$axios.getLinks()
      .then((res) => {
        self.$toast.hide();
        if (0 === res.data.code * 1) {
          self.$store.dispatch('getVideoUrlList', res.data.data);
        }
      });
    },
    /*
     * 删除视频
     */
    delVideoUrl (id) {
      let self = this;
      this.$modal.show({
        content: '是否确定删除视频？',
        success (res) {
          if (res.confirm) {
            self.$toast.show('删除中...');
            self.$axios.delLink({
              id: id
            })
            .then((res) => {
              self.$toast.hide();
              if (0 === res.data.code * 1) {
                self.getVideoUrl();
              }
              else{
                wx.showToast({
                  title: '删除失败',
                  icon: 'none',
                  duration: 1500,
                });
              }
            });
          }
        },
      });
    },
    getClipboard () {
      let self = this;
      wx.getClipboardData({
        success(res) {
          self.videoUrl = res.data;
        }
      })
    },
  },

  mounted () {
    this.getImage();
    this.getVideo();
    this.getVideoUrl();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
